<template>
    <div>
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%;" @selection-change="handleSelectionChange"  @select-all="selectAll" ref="table"  >
                <el-table-column type="selection" width="55"></el-table-column>
                <!--姓名-->
                <el-table-column prop="realName" :label="$t('common.name')" width="230"></el-table-column>
                <!--手机号-->
                <el-table-column prop="phone" :label="$t('common.mobileNumber')" width="200"></el-table-column>
<!--                &lt;!&ndash;所在城市&ndash;&gt;
                <el-table-column prop="city" :label="$t('common.city')" width="200"></el-table-column>
                &lt;!&ndash;用户类型&ndash;&gt;
                <el-table-column prop="userType" :label="$t('system.userType')" width="180">
                    <template slot-scope="scope">{{ scope.row.userType | switchUserType }}</template>
                </el-table-column>-->
                <!--营销类型-->
                <el-table-column align="left" prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                    <template slot-scope="{row}">{{ keyMap.marketingType(row.marketingType) }}</template>
                </el-table-column>
                <!--备注-->
                <el-table-column prop="remark" :label="$t('common.remark')" :show-overflow-tooltip="true" min-width="120"></el-table-column>
                <!--所属APP-->
                <el-table-column align="left" prop="appName" :label="$t('common.ownedApp')" min-width="120">
                    <template slot-scope="{row}">{{ row.appName }}</template>
                </el-table-column>
                <!--优惠券-->
                <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="180">
                    <template slot-scope="{ row }">{{ !row.couponUrl ? '--' : row.couponUrl }}</template>
                </el-table-column><!--优惠券-->
                <!--分派时间-->
                <el-table-column prop="distributionTime" :label="$t('salesManage.distributeTime')" width="180">
                    <template slot-scope="scope">{{ scope.row.distributionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <!--电销员-->
                <el-table-column :label="$t('salesManage.salesman')" prop="salesmanName" width="200"></el-table-column>
                <!--批次号-->
                <el-table-column :label="$t('salesManage.batchNumber')" width="120" prop="batchCode"></el-table-column>
            </el-table>
        </div>
        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
    </div>
</template>

<script>
import mixin from "@/service/mixin";
import Pagination from "@/components/pagination";
import { keyMap } from '@/config';

export default {
    name: "processing",
    components: {
        Pagination,
    },
    props: {
        searchForm: {
            type: Object
        },
        refresh: {
            type: Boolean
        },
    },
    mixins: [mixin],
    data() {
        return {
            keyMap,
            selectedList: [],
        };
    },
    methods: {
        getTableData(page = this.page) {
            const { appName, marketingType, firstSalesmanId, salesmanName,batchCode } = this.searchForm;
            const params = {
                userId: firstSalesmanId,
                currentStatus: 1,//待处理
                appName: appName.join(','),
                marketingType: marketingType.join(','),
                salesmanName,
                batchCode:batchCode.join(','),
                page: {
                    pageNo: page.currentPage,
                    pageSize: this.page.pageSize
                }
            };
            console.warn(params,batchCode,'dasdasd')
            this.$api.telSales.queryUserList(params).then(res => {
                const { status, data, error } = res;
                if (status === "1" && error === "00000000") {
                    this.tableData = data.data || [];
                    this.page.recordsTotal = data.pageCount;
                    this.tableMaxHeight = window.document.body.clientHeight - 220;
                }
                this.$emit('updateFresh', false);
            });
        },
        handleSelectionChange(val) {
            this.selectedList = [];
            val.forEach(item => {
                this.selectedList.push(item.telUserId);
            });
            this.$emit('selectedChange', this.selectedList,'handling');
        },
        selectAll(selection) {
            const tableWrap = this.$refs.table;
            const table = tableWrap.$el.querySelector('.el-table__body-wrapper');
            const tableHeader = tableWrap.$el.querySelector('.el-table__header-wrapper');
            if (table) {
                tableHeader.scrollLeft = 0;
            }
        },
    },
    created() {
        this.getTableData();
    },
    watch:{
        refresh(val){
            if (val) {
                this.getTableData();
                this.selectedList=[];
            }
        },
    },
};
</script>


<style>
</style>
